<template>
    <div>
        <Modal :draggable="!$config.mask" :mask="$config.mask" :mask-closable="!$config.mask"
               :value="value"
               @on-ok="save"
               @on-visible-change="visibleChange"
               :width="1000">
            <p slot="header">
                选择用户
            </p>
            <o-u-user-select ref="userSelect" v-model="selectedUsers" :additional="{info:this.modalData.info,creator:this.modalData.creator}"></o-u-user-select>
            <div slot="footer">
                <Button icon="md-close" @click="cancel">取消</Button>
                <Button icon="md-checkmark" type="primary" @click="save" :disabled="selectedUsers.length===0">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import OUUserSelect from '@/components/select/o-u-user-select.vue';
import _ from 'lodash';

@Component({
    components: {OUUserSelect},
})
export default class OUUserSelectModal extends AbpBase {
    name: string = 'OUUserSelectModal';
    @Prop({type: Boolean, default: false}) value: boolean;
    @Prop({
        type: Object, default: () => {
        }
    }) modalData: any;

    selectedUsers: any[] = [];


    visibleChange(value: boolean) {
        if (!value) {
            this.reset();
            this.$emit('input', value);
        } else {
            (this.$refs.userSelect as any).selectedUsers = this.modalData.selectedUsers;
        }
    }

    save() {
        this.$emit('submit', this.selectedUsers, this.modalData.opener);
        this.$emit('input', false);
    }

    cancel() {
        this.$emit('input', false);
    }


    reset() {
        (this.$refs.userSelect as any).selectedUsers = [];
        (this.$refs.userSelect as any).clickAll();
        ((this.$refs.userSelect as any).$refs.tableSelect as any).filter = '';
        ((this.$refs.userSelect as any).$refs.tableSelect as any).sorting = '';
        ((this.$refs.userSelect as any).$refs.tableSelect as any).currentPage = 1;
    }



    mounted() {
        const leftCard = (this.$refs.userSelect as any).$el.getElementsByClassName('ivu-card-body')[0];
        leftCard.classList.add('beautiful-bar');
        leftCard.style.height = '500px';
        leftCard.style.overflow = 'auto';
    }
}
</script>

<style lang="less" scoped>

</style>

